<template>
    <!-- 头部 -->
    <el-header>
        <img class="avatar_box" src="@/assets/weblogo.jpg" alt="" height="50px" />
        <div>
            <el-input placeholder="请输入内容" ref="searchref" v-model="input" class="input-with-select">
                <el-select v-model="select" slot="prepend" placeholder="请选择">
                    <el-option label="歌名" value="songname"></el-option>
                    <el-option label="歌手名" value="singername"></el-option>
                    <el-option label="歌词" value="songword" disabled></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
        </div>
        <div>
            <el-badge is-dot>
                <el-button class="logbutton" type="info"><i class="el-icon-message"></i></el-button>
            </el-badge>
            &nbsp;
            <el-dropdown>
                <el-button class="logbutton" type="info">
                    {{ username }}&nbsp;<i class="el-icon-arrow-down"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <div>
                        <el-badge :value="12" class="item">
                            <el-button size="small">评论</el-button>
                        </el-badge>
                        <el-divider direction="vertical"></el-divider>
                        <el-badge :value="12" class="item">
                            <el-button size="small">评论</el-button>
                        </el-badge>
                        <el-divider direction="vertical"></el-divider>
                        <el-badge :value="12" class="item">
                            <el-button size="small">评论</el-button>
                        </el-badge>
                    </div>
                    <el-divider></el-divider>
                    <el-dropdown-item>我的会员<i class="el-icon-arrow-right"></i></el-dropdown-item>
                    <el-dropdown-item>等级</el-dropdown-item>
                    <el-dropdown-item>商城</el-dropdown-item>
                    <el-divider></el-divider>
                    <el-dropdown-item>个人信息设置</el-dropdown-item>
                    <el-dropdown-item>绑定社交账号</el-dropdown-item>
                    <el-divider></el-divider>
                    <el-dropdown-item>我的客服</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- <el-button class="logbutton" type="info" @click="test">33</el-button> -->
            &nbsp;
            <el-button class="logbutton" v-if="!islogin" type="info" @click="register">注册</el-button>
            <el-button class="logbutton" v-if="!islogin" type="info" @click="login">登录</el-button>
            <el-button class="logbutton" v-if="islogin" type="info" @click="logout">退出</el-button>
        </div>
    </el-header>
</template>
<script>

export default {
    name: "CommonHeader",
    components: {},
    data() {
    return {
      isCollapse: false,
      islogin: window.localStorage.getItem("token"),
      username: window.sessionStorage.getItem('user'),
      input: '',
      select: '',
    };
  },
  created() {
    console.log(window.sessionStorage.getItem('user'));
  },
    methods: {
        login() {
            this.$router.push("/login");
            // console.log(window.sessionStorage.getItem('userid'));
        },
        register() {
            this.$router.push("/register");
        },
        logout() {
            window.sessionStorage.clear('userid');
            window.sessionStorage.clear('user');
            window.localStorage.clear('token');
            this.$data.islogin = false;
            this.$message.success("退出成功！");
        },
        async test() {
            const res = await this.$http.get('user/verify',{params: { token: window.localStorage.getItem("token") }});
            console.log(res);
        },
        async search() {
            if (this.$data.select == 'singername') {
                // const resSI = await this.$http.get('music/findSonger',{params: { name: this.$data.input }});
                // console.log(resSI);
                this.$router.push({
                    path: '/searchsinger',
                    query: {singername: this.$data.input}
                });
                console.log(this.$refs.searchref);
            } else if(this.$data.select == 'songname') {
                // const resSO = await this.$http.get('music/findSong',{params: { name: this.$data.input }});
                // console.log(resSO);
                this.$router.push({
                    path: '/searchsong',
                    query: {songname: this.$data.input}
                });
            } else {
                this.$message.error("请选择查询条件！");
            }
            this.$data.input = "";
            this.$data.select = "";
        }
    },
}
</script>
<style scoped>
.avatar_box {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 3px;
    margin-left: 20px;
    box-shadow: 0 0 20px #ddd;
}

.el-select {
    width: 100px;
}

.el-input {
    width: 700px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.logbutton {
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}

.el-header {
  background: #5a8cbb;
  box-shadow: inset -8px -8px 16px #2d465e, inset 8px 8px 16px #87d2ff;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
}

</style>